<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="commonJS::commonJsCss('计费规则管理')">
    <title>计费规则管理</title>
</head>
<body ng-app="billingRuleApp" ng-controller="billingRuleCtrl" ng-init="init()">
<!--通用头部-->
<div th:replace="head::header" ></div>
<div th:replace="menu::menu" ></div>
<div style="height:91%;">
    <div class="form-table" style="width: 88%;min-height: 663px;height: 100%">
        <table class="div_form_table">
            <tr>
                <td class="div_form_middle_title" style="text-align: left;">
                    <button class="form-btn-insert" data-ng-click="toEditBillingRule('1')" data-ng-show="isSuperAdmin">新增</button>
                    <button class="form-btn-edit" data-ng-click="toEditBillingRule('2')" data-ng-show="isSuperAdmin">编辑</button>
                    <button class="form-btn-delete" data-ng-click="deleteBillingRule()" data-ng-show="isSuperAdmin">删除</button>
                </td>
            </tr>
        </table>

        <div class="efbtable-no-search">
            <!--页面标题+公司-->
            <div class="form-title-div" style="width: 17%">
                <span class="form-title">计费规则管理</span>
                <span data-ng-show="false" id="span_superAdmin" sec:authentication="principal.superAdmin"></span>
            </div>

            <!--树形结构-->
            <div class="well billingrule_well_div" style="margin-bottom: 0px;">
                <ul id="billingRuleTree" class="ztree billingrule_ztree_ul"></ul>

                <div class="modal fade" tabindex="-1" role="dialog" id="editBillingRuleModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header modal-header-efb">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title modal-title-efb">计费规则管理</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row-fluid">
                                    <div class="span12">
                                        <input type="text" data-ng-show="false" id="billingRuleId" data-ng-model="billingRuleObject.billingRuleId" value=""/>
                                        <table class="div_form_table">
                                            <tr>
                                                <td class="div_form_middle_title">
                                                    规则简称<span class="required-field-mark">*</span>
                                                    &nbsp;&nbsp;:&nbsp;&nbsp;
                                                </td>
                                                <td class="div_form_middle_other">
                                                    <input type="text" id="ruleAbbrev" name="ruleAbbrev" data-ng-model="billingRuleObject.ruleAbbrev" maxlength="40" required/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="div_form_middle_title">
                                                    规则全称&nbsp;&nbsp;:&nbsp;&nbsp;
                                                </td>
                                                <td class="div_form_middle_other">
                                                    <input type="text" id="ruleFullname" name="ruleFullname" data-ng-model="billingRuleObject.ruleFullname" maxlength="200" required/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="div_form_middle_title">
                                                    重发率<span class="required-field-mark">*</span>
                                                    &nbsp;&nbsp;:&nbsp;&nbsp;
                                                </td>
                                                <td class="div_form_middle_other">
                                                    <input type="text" id="ruleRate" name="ruleRate" data-ng-model="billingRuleObject.ruleRate" maxlength="2" oninput="this.value=this.value.replace(/[^0-9]/g,'')" required/>%
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="div_form_middle_title">
                                                    备注&nbsp;&nbsp;:&nbsp;&nbsp;
                                                </td>
                                                <td class="div_form_middle_other">
                                                    <textarea id="remark" name="remark" maxlength="500" data-ng-model="billingRuleObject.remark"></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <div>
                                                        <table class="efbtable" style="margin-bottom: -1px;">
                                                            <thead>
                                                            <tr>
                                                                <th class="efbth" style="width: 100px;">选择</th>
                                                                <th class="efbth" style="width: 150px;">开始计数</th>
                                                                <th class="efbth" style="width: 150px;">结束计数</th>
                                                                <th class="efbth">单价</th>
                                                            </tr>
                                                            </thead>
                                                        </table>
                                                    </div>
                                                    <div style="overflow-y:auto;height:300px;">
                                                        <table class="formdata">
                                                            <tbody id="tbody_billingLadders">
                                                            <tr data-ng-repeat="billingLadderObject in billingRuleObject.billingLadderEntityVOList" name="insertBillingLadder_tr">
                                                                <td class="efbTable-border" style="width: 100px;">
                                                                    <input type="checkbox" name="chk_billingLadders" />
                                                                </td>
                                                                <td class="efbTable-border" style="width: 150px;">
                                                                    <input type="text" name="ladderStartnumberValue" data-ng-model="billingLadderObject.ladderStartnumber" onfocus="hilite(this);" onblur="delite(this);" maxlength="5" style="width:70%;" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
                                                                </td>
                                                                <td class="efbTable-border" style="width: 150px;">
                                                                    <input type="text" name="ladderEndnumberValue" data-ng-model="billingLadderObject.ladderEndnumber" onfocus="hilite(this);" onblur="delite(this);" maxlength="5" style="width:70%;" oninput="this.value=this.value.replace(/[^0-9]/g,'')"/>
                                                                </td>
                                                                <td class="efbTable-border">
                                                                    <input type="text" name="unitPriceValue" data-ng-model="billingLadderObject.unitPriceStr" onfocus="hilite(this);" onblur="delite(this);" maxlength="6" style="width:70%;" oninput="this.value=this.value.replace(/[^0-9\.]/g,'')"/>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer modal-footer-efb">
                                <button type="button" class="form-btn-insert" data-ng-click="showInsertTr()">插入</button>
                                <button type="button" class="form-btn-delete" data-ng-click="deleteBillingLadder()">删除</button>
                                <button type="button" class="form-btn-edit" data-ng-click="editBillingRule()">确定</button>
                                <button type="button" class="form-btn-cancel" data-ng-click="closeBillingRuleModal()">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--表格+条件查询+关联+分页-->
            <div id="div_billingrule_table" class="billingrule_table_div" style="margin-top: -42px;">
                <div class="form-table" style="margin: 3px;" data-ng-show="billingRuleEntityVO != null">
                    <div class="efb-form-group">
                        <table class="div_form_table">
                            <tr>
                                <td class="div_form_middle_title" style="width: 10%">规则简称：</td>
                                <td class="div_form_middle_other" style="width: 30%">
                                    <label>{{billingRuleEntityVO.ruleAbbrev}}</label>
                                </td>

                                <td class="div_form_middle_title" style="width: 10%">规则全称：</td>
                                <td class="div_form_middle_other">
                                    <label style="word-break:break-all">{{billingRuleEntityVO.ruleFullname}}</label>
                                </td>
                            </tr>
                            <tr>
                                <td class="div_form_middle_title" style="width: 10%">重发率：</td>
                                <td class="div_form_middle_other" colspan="3">
                                    <label style="word-break:break-all">{{billingRuleEntityVO.ruleRate}}%</label>
                                </td>
                            </tr>
                            <tr>
                                <td class="div_form_middle_title" style="width: 10%">备注：</td>
                                <td class="div_form_middle_other" colspan="3">
                                    <label style="word-break:break-all">{{billingRuleEntityVO.remark}}</label>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="margin-bottom: -1px;">
                        <table class="efbtable">
                            <thead>
                            <tr>
                                <th class="efbth" style="width: 200px;">序号</th>
                                <th class="efbth" style="width: 300px;">开始计数</th>
                                <th class="efbth" style="width: 300px;">结束计数</th>
                                <th class="efbth">单价</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="page-in-table" style="overflow-y:auto;height:440px;">
                        <!--表格-->
                        <table class="efbtable">
                            <tbody>
                            <tr data-ng-repeat="billingLadderObject in billingLadderEntityVOList">
                                <td class="efbTable-border" style="width: 200px;">
                                    <span>{{billingLadderObject.orderNumber }}</span>
                                </td>
                                <td class="efbTable-border" style="width: 300px;">
                                    <span>{{billingLadderObject.ladderStartnumber }}</span>
                                </td>
                                <td class="efbTable-border" style="width: 300px;">
                                    <span>{{billingLadderObject.ladderEndnumber }}</span>
                                </td>
                                <td class="efbTable-border">
                                    <span>{{billingLadderObject.unitPriceStr }}</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--外部容器的DIV随着内部DIV增多而增加高度-->
            <div style="clear:both;"></div>
        </div>
    </div>
</div>
<!--通用尾部-->
<div th:replace="footer::footer" ></div>
<!--js引用：只写自己需要的js-->
<link rel="stylesheet" type="text/css" th:href="@{/zTree/zTreeStyle.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/billingrule.css}"/>

<script type="text/javascript" th:src="@{/js/billingRule/BillingRuleModule.js}"></script>
<script type="text/javascript" th:src="@{/js/common/cookieUtil.js}"></script>
<script type="text/javascript" th:src="@{/js/billingRule/BillingRuleService.js}"></script>
<script type="text/javascript" th:src="@{/js/billingRule/BillingRuleController.js}"></script>

<script type="text/javascript" th:src="@{/zTree/jquery.ztree.core-3.5.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jquery.ztree.excheck-3.5.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jquery.ztree.exedit.js}"></script>
<script type="text/javascript" th:src="@{/zTree/highlight.min.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jQuery-contextMenujstheme.js}"></script>
<script type="text/javascript" th:src="@{/zTree/Query-contextMenudistjquery.contextMenu.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jQuery-contextMenudistjquery.ui.position.min.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jQuery-contextMenujsmain.js}"></script>
<script language="javascript" type="text/javascript">
    function hilite(obj) {
        obj.style.border = '2px solid #000000';
    }
    function delite(obj) {
        obj.style.border = '2px solid #ffffff';
    }
</script>
<style>
    table.formdata {
        border: 1px solid #5F6F7E;
        border-collapse: collapse;
        width: 100%;
    }
    table.formdata th {
        border: 1px solid #5F6F7E;
        background-color: #E2E2E2;
        color: #000000;
        text-align: left;
        font-weight: normal;
        padding: 2px 4px 2px 4px;
        margin: 0;
    }
    table.formdata td {
        margin: 0;
        padding: 0;
        border: 1px solid #E2E2E2;
    }
    table.formdata input {
        width: 80px;
        padding: 2px 4px 2px 4px;
        margin: 0;
        border: 2px solid #ffffff;
    }
    .formdata input:focus {
        border: 2px solid #000000;
    }
</style>
</body>
</html>